<style lang="less">
  @import '../styles/common.less';
  @import '../tables/components/table.less';
  @import './css/set_up_page.less';
</style>
<style>
</style>
<template>
  <div>
    <div class="body">
      <Card class="Card">
        <div class="Card-div">
          <Table stripe border :columns="columns_model" :data="data_model" @on-row-click="onRowData"></Table>
          <div style="margin: 10px;overflow: hidden;height: 36px;" v-if="data_model.length > 0">
            <div style="text-align: center;">
              <Page :current="page_fun" :total="rows_fun" @on-change="changePage_fun"/>
            </div>
          </div>
        </div>
      </Card>
      <!--详情-->
      <Modal v-model="show_modal_model" :width="800"
             class-name="vertical-center-modal" class="Modal-Detail-div">
        <h3 slot="header" style="color:#2D8CF0" v-text="dataObj.name ? dataObj.name : '管理员'"></h3>
        <div class="detail-content">
          <i-table stripe border :columns="columns_user" :data="dataObj.user"></i-table>
        </div>
        <div slot="footer">
          <Button type="text" @click="colseModel()">取消</Button>
        </div>
      </Modal>
      <!--减人-->
      <Modal v-model="deluser_modal_model" :width="800"
             class-name="vertical-center-modal" class="Modal-Detail-div">
        <h3 slot="header" style="color:#2D8CF0" v-text="dataObj.name ? '删除 '+dataObj.name + ' 管理员' : '删除管理员'"></h3>
        <div class="detail-content">
          <i-table stripe border :columns="columns_user" :data="dataObj.user" @on-selection-change="selectionChange"
                   ref="selectionTable"></i-table>
        </div>
        <div slot="footer">
          <Button type="text" @click="colseModel()">取消</Button>
          <Button type="error" @click="deluser_save()">删除</Button>
        </div>
      </Modal>
      <!--加人-->
      <Modal v-model="adduser_modal_model" :width="800"
             class-name="vertical-center-modal" class="Modal-Detail-div">
        <h3 slot="header" style="color:#2D8CF0" v-text="dataObj.name ? '添加 '+dataObj.name + ' 管理员' : '添加管理员'"></h3>
        <div class="detail-content">
          <i-table stripe border :columns="columns_add_user" :data="add_data_user"
                   @on-selection-change="selectionChange"
                   :height="380"
                   ref="selectionTable"></i-table>
          <div style="margin: 10px;overflow: hidden;height: 36px;" v-if="add_data_user.length > 0">
            <div style="text-align: center;">
              <Page :current="page" :total="rows" @on-change="changePage"/>
            </div>
          </div>
        </div>
        <div slot="footer">
          <Button type="text" @click="colseModel()">取消</Button>
          <Button type="primary" @click="adduser_save()">添加</Button>
        </div>
      </Modal>

    </div>
  </div>
</template>

<script>
  import Cookies from 'js-cookie';
  import Util from '../../libs/util';
  import Utils from '../../libs/mod.utils';
  import Nim from '../../libs/mod.nim';
  import String from '../../libs/mod.string';
  import Modal from '../../libs/mod.Modal';
  export default {
    name: 'set_up_page',
    data () {
      return {
        visible: false,
        show_menu: 'model',//model dep user

        columns_model: [
          {
            key: 'name',
            title: '功能名称',
            align: 'center',
          },
          {
            key: 'num',
            title: '管理员人数',
            align: 'center',
            render: (h, params) => {
              var num = params.row.num || 0;
              return h('div', [
                h('span', num + ' 人')
              ]);
            }
          },
          {
            title: '操作',
            key: 'action',
            width: 150,
            align: 'center',
            render: (h, params) => {
              var Button1 = h('Button', {
                props: {
                  type: 'primary',
                  size: 'small',
                },
                style: {
                  marginRight: '5px'
                },
                on: {
                  click: e => {
                    e.stopPropagation();
                    var data = params.row;
                    vue_this.adduserFun(data);
                  }
                }
              }, '加人');
              var Button2 = h('Button', {
                props: {
                  type: 'error',
                  size: 'small',
                },
                style: {
                  marginRight: '5px'
                },
                on: {
                  click: e => {
                    e.stopPropagation();
                    var data = params.row;
                    vue_this.deluserFun(data);
                  }
                }
              }, '减人');
              return h('div', [Button1, Button2]);
            }
          }
        ],
        columns_user: [
          {
            type: 'selection',
            width: 100,
            align: 'center'
          },
          {
            key: 'mobile',
            title: '手机号',
            align: 'center',
          },
          {
            key: 'dname',
            title: '部门',
            align: 'center',
          },
        ],
        columns_add_user: [
          {
            type: 'selection',
            width: 100,
            align: 'center'
          },
          {
            key: 'mobile',
            title: '手机号',
            align: 'center',
          },
        ],

        data_model: [],
        data_dep: [],
        data_user: [],

        show_modal_model: false,
        show_modal_dep: false,
        show_modal_user: false,

        adduser_modal_model: false,
        deluser_modal_model: false,
        setup_dep_model: false,

        dataObj: {},
        all_user_data: [],
        selectionArr: [],
        isUpdate: false,
        synchronous_title: '',
        synchronous: false,

        page: 1,
        size: 10,
        rows: 0,
        page_fun: 1,
        rows_fun: 0,
        id: '',

        add_data_user: [],
        original_data_user: [],
      };
    },
    created: function () {
      var _this = this;
    },
    mounted () {
      var _this = this;
      _this.getFunctionList();
    },
    methods: {
      show: function () {
        this.visible = true;
      },
      // 功能列表
      getFunctionList: function () {
        var _this = this;
        var data = {
          page: _this.page_fun,
          size: _this.size,
        };
        var params = {
          url: '/function/list',
          type: Util.method.post,
          data: data,
          success: _successFun
        };
        Util.ajax(_this, params);
        function _successFun(res) {
          if (res.result == 0) {
            var _data = res.data || [];
            _this.data_model = _data;
            _this.rows_fun = res.rows;
          } else {
            Utils.showToast.error(_this, '查询功能列表失败!');
          }
        }
      },
      // 点击行
      onRowData: function (data, index) {
        var _this = this;
        _this.id = data.id;

        _this.query(_this.id, function (_data) {
          _this.dataObj = _data;
          _this.show_modal_model = true;
        });
      },
      //查询详情
      query: function (id, fun) {
        var _this = this;
        var data = {
          id: id,
        };
        var params = {
          url: '/function/query',
          type: Util.method.post,
          data: data,
          success: _successFun
        };
        Util.ajax(_this, params);
        function _successFun(res) {
          if (res.result == 0) {
            var _data = res.data || {};
            if (fun) {
              fun(_data);
            }
          } else {
            Utils.showToast.error(_this, '查询功能详情失败!');
          }
        }
      },

      // 用户列表
      get_user_data: function () {
        var _this = this;
        var original_data_user = _this.dataObj.user || [];
        var data = {
          page: _this.page,
          size: _this.size,
        };
        var params = {
          url: '/user/list',
          type: Util.method.post,
          data: data,
          success: _successFun
        };
        Util.ajax(_this, params);
        function _successFun(res) {
          if (res.result == 0) {
            var _data = res.data || [];
            for (var k in _data) {
              if (!_data[k]) {
                continue;
              }
              if (Utils.idInArray(_data[k].id, original_data_user)) {
                _data[k]._checked = true;
                _data[k]._disabled = true;
              }
            }
            _this.add_data_user = _data;
            _this.rows = res.rows;

            _this.adduser_modal_model = true;
          } else {
            Utils.showToast.error(_this, '查询用户列表失败!');
          }
        }
      },
      // 分页
      changePage: function (page) {
        var _this = this;
        _this.page = page;
        _this.selectionArr = [];
        _this.get_user_data();
      },
      // 分页
      changePage_fun: function (page) {
        var _this = this;
        _this.page_fun = page;
        _this.selectionArr = [];
        _this.getFunctionList();
      },

      // 加人
      adduserFun: function (el) {
        var _this = this;
        _this.id = el.id;

        _this.query(_this.id, function (_data) {
          _this.dataObj = _data;

          _this.page = 1;
          _this.selectionArr = [];
          _this.get_user_data();
        });
      },
      // 加人，保存
      adduser_save: function () {
        var _this = this;
        var original_data_user = _this.dataObj.user || [];
        var selection = _this.selectionArr;
        if (selection.length == 0) {
          Utils.showToast.error(_this, '请选择人员!');
          return false;
        }
        var ids = [];
        for (var k in selection) {
          if (!selection[k]) {
            continue;
          }
          var id = selection[k].id;
          if (id) {
            ids.push(id);
          }
        }
        for (var k in original_data_user) {
          if (!original_data_user[k]) {
            continue;
          }
          var id = original_data_user[k].id;
          if (id) {
            ids.push(id);
          }
        }
        // 保存
        _this.save(ids);
      },

      // 减人
      deluserFun: function (el) {
        var _this = this;
        _this.id = el.id;

        _this.query(_this.id, function (_data) {
          _this.dataObj = _data;
          _this.deluser_modal_model = true;
        });
      },
      // 减人，保存
      deluser_save: function () {
        var _this = this;
        var data_user = _this.dataObj.user || [];
        var selection = _this.selectionArr;
        if (selection.length == 0) {
          Utils.showToast.error(_this, '请选择人员!');
          return false;
        }
        for (var k in selection) {
          if (!selection[k]) {
            continue;
          }
          var id = selection[k].id;
          for (var d in data_user) {
            if (!data_user[d]) {
              continue;
            }
            if (data_user[d].id == id) {
              var del = data_user.splice(d, 1);
              break;
            }
          }
        }
        var ids = [];
        for (var k in data_user) {
          if (!data_user[k]) {
            continue;
          }
          var id = data_user[k].id;
          if (id) {
            ids.push(id);
          }
        }
        // 保存
        _this.save(ids);
      },

      // 保存
      save: function (ids) {
        var _this = this;
        var data = {
          id: _this.id,
          uids: ids
        };
        var params = {
          url: '/function/update',
          type: Util.method.post,
          data: data,
          success: _successFun
        };
        Util.ajax(_this, params);
        function _successFun(res) {
          if (res.result == 0) {
            _this.getFunctionList();
            _this.colseModel();
          } else {
            Utils.showToast.error(_this, '保存失败!');
          }
        }

      },
      // 列表多选 选中数据
      selectionChange: function (selection) {
        var _this = this;
        _this.selectionArr = selection;
      },
      // 关闭
      colseModel: function () {
        var _this = this;
        _this.isUpdate = false;
        _this.show_modal_model = false;
        _this.adduser_modal_model = false;
        _this.deluser_modal_model = false;
        _this.setup_dep_model = false;
        _this.selectionArr = [];
        _this.$refs.selectionTable.selectAll(false);
      },


    }
  };
</script>

